<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function fun1(){
            console.log("我被单击了！")
        }

        function fun2(){
            console.log("我被双击了！")
        }
        function fun3(){
            console.log("我移动到图片上了！")
        }
        function fun4(){
            console.log("我从图片上移开了！")
        }
        function fun5(){
            console.log("我在图片上移动！")
        }
        function fun6(){
            console.log("移动到元素上触发！")
        }
        function fun7(){
            console.log("移出元素上触发！")
        }

        // 按键事件
        function fun7(){
            console.log("按键按下了！")
        }
        function fun8(){
            console.log("按键抬起了！")
        }

        /* 表单事件 */
        // 获得焦点
        function testFocus(){
            console.log("我获得了焦点！")
        }

        // 失去焦点
        function testBlur(){
            console.log("我失去了焦点！")
        }

        // 内容改变并且失去了焦点后，即确实内容改变了，当在下拉框上作用时，如果option没有显示定义value，那么获取的value就是option的文本域的内容，如果显示给了value的值，那么获取的value就是定义的value
        function testChange(value){
            console.log("我的内容改变了！" + value)
        }

        // 提交事件 onsubmit 应该是作用在form表单上，而不是按钮上
        function testSubmit() {
            /* 
                弹框的三种方式：
                    alert：信息提示框
                    prompt：信息输入框
                    confirm：信息确认框
            */
            var result = confirm("确定提交表单吗？")
            // 在这里我们有机会阻止表单的提交
            if(!result){
                //event.preventDefault();// 阻止组件的默认行为，在这里阻止了表单的提交
                return false;// 也可是使用retrun true或false来控制表单是否提交，这里的return，是将false返回给表单，并且在表单出调用方法的地方也要return，这个return是将false返回给浏览器的，浏览器接收到false就不会提交表单了
            }
            return true
        }

        // 重置表单 onreset
        function testReset(){
            alert("表单要重置了！")
        }
    </script>
</head>
<body>
    <form action="01js的引入方式.html" method="get" onsubmit="return testSubmit()" onreset="testReset()">
        用户昵称：<input type="text" name="relName" onfocus="testFocus()" onblur="testBlur()" onchange="testChange()" ><br>
        登录账号：<input type="text" name="loginName"><br>
        选择籍贯：<select name="jiguan" id="jg" onchange="testChange(this.value)">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select>
        <input type="submit" value="注册">
        <input type="reset" value="清空">
    </form>





    <hr>
    请输入：<input type="text" onkeydown="fun7()" onkeyup="fun8()">
    <hr>
    <img src="./img/image.png" alt="这个图片坏了" title="这是个图片" style="width: 200px;height: 100px;" 
    onmouseover="fun3()" onmouseout="fun4()" onmousemove="fun5()" onmouseenter="fun6()" onmouseleave="fun7()">
    <hr />
    <button id="btn1" onclick="fun1()" ondblclick="fun2()">确定</button>
</body>
</html>